<template >
    <el-menu
      background-color="rgb(41, 162, 167)"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="el-menu-vertical-demo"
      unique-opened
      router
    >
      <div v-for="item in children" :key="item.ID">
        <el-submenu v-if="item.children" :index="item.ID + ''">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>{{ item.name }}</span>
          </template>

          <tree :children="item.children"></tree>
        </el-submenu>
        <el-menu-item v-if="!item.children" :index="item.path + ''">
         <template slot="title" >
            <i class="pad"></i>
            <span>{{ item.name }}</span>
          </template>
        </el-menu-item>
      </div>
    </el-menu>
</template>
<script>
export default {
  name: "tree",
  props: ["children"],
};
</script>
<style lang="less" scoped>
span{
  padding: 10px;
}
.pad{
  padding:15px;
}
</style>
